<template lang="">
    <div>
<el-dialog :before-close="cancel" center  :title="isAdd ? '添加角色' : '修改角色'"  :visible.sync="isShow">
  <el-form :model="roleForm" :rules="rules" ref="roleForm" label-width="100px" >
    <el-form-item label="角色名称" prop="rolename">
      <el-input v-model="roleForm.rolename" autocomplete="off"></el-input>
    </el-form-item>
        <el-form-item label="角色权限" >
          <!-- 
          data	展示数据	array 
          node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
          show-checkbox	节点是否可被选择
          default-expand-all	是否默认展开所有节点
        -->
          <el-tree
            ref="tree"
            default-expand-all
            :data="menulist"
            show-checkbox
            node-key="id"
            :props="{
              children: 'children',
              label: 'title',
            }"
          >
          </el-tree>
        </el-form-item>
    <el-form-item  label="状态">
     <el-switch
   v-model="roleForm.status"
   active-color="#13ce66"
   inactive-color="#ff4949"
   :active-value="1"
   :inactive-value="2">
 </el-switch>
 </el-form-item>
  </el-form>
   <div slot="footer" class="dialog-footer">
     <el-button @click="cancel">取 消</el-button>
     <el-button type="primary"  @click="confirm">确 定</el-button>
   </div>
</el-dialog>
  </el-form>
    </div>
</template>
<script>
import { roleAdd, roleInfo, roleEdit } from '../../request/api';
import { mapActions, mapGetters } from 'vuex';
export default {
    props: ['isShow', 'isAdd'],
    computed: {
        ...mapGetters({
            menulist: "menu/getMenuList",
        })
    },
    data() {
        return {
            roleForm: {
                rolename: '',//角色名称
                menus: '',//角色权限 id数组'2,3,4' 字符串
                status: 1,//状态1正常2禁用
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ]
            },
        };

    },
    mounted() {
        // 触发菜单行动  如果菜单列表没有数据就调用菜单列表  否则就不去进行菜单列表的交互，利用vuex的环迅数据
        if (this.menulist.length == 0) {
            this.getMenu()
        }

    },
    methods: {
        ...mapActions({
            getRole: 'role/changeRoleAction',
            getMenu: "menu/changeMenuAction",
        }),
        // 点击取消
        cancel() {
            this.$emit('cancel', false)
            this.reset()
        },
        // 封装一个重置事件
        reset() {
            this.roleForm = {
                rolename: '',//角色名称
                menus: '',//角色权限 id数组'2,3,4' 字符串
                status: 1,//状态1正常2禁用
            };
            // resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
            this.$refs.roleForm.resetFields();
            // 清空tree结构的选择状况
            this.$refs.tree.setCheckedKeys([]);
        },
        // 获取一条数据的事件
        lookup(id) {
            roleInfo({ id }).then((res) => {
                this.roleForm = res.list;
                this.$refs.tree.setCheckedKeys(
                    this.roleForm.menus ? this.roleForm.menus.split(",") : []
                );
                this.roleForm.id = id;
            });
        },
        // 点击确定
        confirm() {
            this.$refs.roleForm.validate((flag) => {
                if (flag) {
                    console.log('验证成功');
                    // this.$refs.tree.getCheckedKeys() [8, 10, 12]
                    // 后端要求menus的数据格式'8,10,12'
                    console.log(this.$refs.tree.getCheckedKeys());
                    this.roleForm.menus = this.$refs.tree.getCheckedKeys()
                        ? this.$refs.tree.getCheckedKeys().join(",")
                        : "";
                    if (this.isAdd) {
                        roleAdd(this.roleForm).then((res) => {
                            console.log(res, '添加');
                            if (res.code == 200) {
                                console.log(this.roleForm, '调用添加接口');
                                this.cancel()
                                this.getRole()
                            }
                        })
                    } else {
                        roleEdit(this.roleForm).then((res) => {
                            console.log(res, '添加');
                            if (res.code == 200) {
                                this.cancel()
                                this.getRole()
                            }
                        })
                    }
                } else {
                    console.log('验证失败');
                }
            })
        }
    }
}
</script>
<style lang="">
    
</style>